How to Prevent the Website Color Change in Dark Mode

Last Updated: February 12, 2021 | Reading Time: < 1 minute

I love dark mode, especially if I look at the screen in ambient light. But unfortunately, some of my client’s websites are having issues when I view them in dark mode; dark text on dark background.

I’ve tried few methods but seems this one is really work in my case:

Meta Tag

I add this meta data to the header tag:

<meta name="color-scheme" content="light only">

The meta tag above indicates that the color scheme is only supported light mode.

Another option is the scheme preferred in light mode, but it supports dark mode as well:

<meta name="color-scheme" content="light dark">

The first color scheme indicates the preferred one. Tested on Safari, Chrome, and Firefox.

Source:
Standard metadata names – HTML: HyperText Markup Language | MDN (mozilla.org)
Dark Mode Support in WebKit | WebKit

CSS

Another method is to use CSS:

:root {
         color-scheme: light only;
       }

The code above indicate that the styling only use the light version only.

source:
What Does Dark Mode’s “color-scheme” Actually Do? 🤔 | by Thomas Steiner | Dev Channel | Medium

Hopefully it helps!